<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SimpleUI 示例中心-tab</title>
		<meta name="description" content="SimpleUI是一个基于jQuery的组件库，适合用于构建web2.0的应用程序和小型网站" />
		<meta name="keywords" content="jQuery js simple ui simpleUI web application" />
        <link type="text/css" rel="stylesheet" href="../SyntaxHighlighter/SyntaxHighlighter.css"/>
        <link type="text/css" rel="stylesheet" href="../css/core.css"/>
        <style type="text/css">
            .demo-area{padding:15px;border:1px solid #eee;background:#fbfbfb;}
            .tab{width:300px; height:230px; margin:50px 0 0 50px}
            .tabList{height:24px;border:1px solid #D8D8D8; border-bottom:none}
            .tabList li{background:#F6F6F6;border:1px solid #F6F6F6;border-bottom-color:#D8D8D8;border-top:none;color:#666;cursor:default;height:23px;font-size:12px;line-height: 24px; margin-left: -1px;text-align: center; width:76px; float:left;display:inline; font-weight:800}
            .tabList li a{color:#666;text-decoration:none}
            .tabList li a:hover{color:#F60;text-decoration:underline;}
            .tabList .first{border-left:1px solid #D8D8D8}
            .tabList .current{background:#FFF;border-color:#D8D8D8;height:24px; position: relative; color:#333; border-bottom:none}
            .tabList .last{border-right:none; width:67px}
            .tabContent{border:1px solid #ccc; border-top:none;height:154px; overflow:hidden; width:298px}
            .tabPanel{ display:none; width:298px; height:154px}
            .show{display:block;}
        </style>
    </head>
    <body>
        <div class="container clearfix" id="hd">
            <h1 class="s-logo"></h1>
            <div class="s-nav">
                <span class="s-nav-l"></span>
                <span class="s-nav-r"></span>
                <ul class="clearfix">
                    <li>
                        <a href="/doc">文档</a>
                    </li>
                    <li class="current">
                        <a href="/doc/demo.html">示例</a>
                    </li>
                    <li>
                       <a href="http://simpleui.org/simpleUI.rar">下载</a>
                    </li>
                    <li >
                        <a href="/doc/deploy.html">部署</a>
                    </li>
                    <li>
                        <a href="#">关于</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container" id="bd">
            <h2 class="s-title">SimpleUI示例中心</h2>
            <div class="clearfix doc-content demo-content">
                <div class="api-content">
                    <h2 class="api-name">SimpleSlider Demo</h2>
                    <h3 class="api-guide">Tab 应用</h3>
                    <textarea name="code" class="js"> 
                    $('#tab2').slider({
                        content : '.tabPanel',
                        trigger : '.tabList li',
                        triggerCurrentClass : 'current',
                        delay : 0,
                        direction : 'none',
                        bindEvent : 'click',
                        isAuto: false,
                        defaultShow: 3
                    });
                    </textarea>
                    <div class="demo-area">
                        <div class="tab" id="tab">
                            <ul class="tabList clearfix">
                                <li class="first">手机充值</li>
                                <li>游戏快充</li>
                                <li>旅行</li>
                                <li class="last">保险</li>
                            </ul>
                            <div class="tabContent">
                                <div class="tabPanel">
                                    <iframe style="margin-top:10px;*margin-left:-5px" src="http://tcc.taobao.com/cc/mobile_charge.htm?css=fp_2011" scrolling="no" frameborder="0"></iframe>
                                </div>
                                <div class="tabPanel">
                                    <iframe style="margin:10px 0 0 10px" src="http://tcc.taobao.com/expwy/game_card.htm?css=fp_2011" scrolling="no" frameborder="0"></iframe>
                                </div>
                                <div class="tabPanel">
                                    <iframe src="http://www.taobao.com/index_inc/2011a/flight_search.html" scrolling="no" frameborder="0"></iframe>
                                </div>
                                <div class="tabPanel">
                                    <iframe style="margin:17px 0 0 10px" src="http://www.taobao.com/go/act/baoxian/taobao_index_new.php" scrolling="no" frameborder="0"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../SyntaxHighlighter/shCore.js"></script>
        <script src="../SyntaxHighlighter/allmin.js"></script>
        <script type="text/javascript">
            dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
            dp.SyntaxHighlighter.HighlightAll('code');
        </script>
        <script type="text/javascript" src="../../src/jquery.js"></script>
        <script type="text/javascript" src="../../src/_beta/SimpleCore.js"></script>
        <script type="text/javascript" src="../../src/_beta/SimpleSlider/SimpleSlider_v1.1.js"></script>
        <script type="text/javascript">
           $('#tab').slider({
                content : '.tabPanel',
                trigger : '.tabList li',
                triggerClass : '',
                triggerCurrentClass : 'current',
                delay : 0,
                direction : 'none',
                bindEvent : 'click',
                isAuto: false,
                defaultShow: 3
            });
        </script>
    </body>
</html>
